<template>
	<CardWrapper @onCard="onCard(ControlButton[data.currState].navDetailPath)">
		<template #head>
			<view class="u-flex u-row-between">
				<text class="head-left">
					{{ data.createTime|typeText(type)}}
				</text>
				<text class="head-right" :style="StateColorStyle">
					{{data.currStateToName}}
				</text>
			</view>
		</template>
		<template #title>
			<text>{{data.deviceName || '-'}} </text>
		</template>
		<template #bodyLeft>
			<view v-show="ShowBaseInfo ">
				<view class="info">
					<text class="info-label">所属科室</text>
					<text class="info-value">{{data.deptIdToName}}/{{data.hospitalIdToName}}</text>
				</view>
				<view class="info">
					<text class="info-label">联系人</text>
					<text class="info-value">{{data.deptUser||'-'}} {{data.phone||''}}</text>
				</view>
				<template v-if="ShowQuoteInfoOther">
					<view class="info">

						<text class="info-label">报价金额</text>
						<text class="info-value">{{data.quoteMoney||'0'}} 元</text>
					</view>
				</template>
			</view>
			<view v-show="ShowRenturnOtherInfo">
				<view class="info">
					<text class="info-label">送回科室</text>
					<text class="info-value">{{data.sendDeptIdToName}}</text>
				</view>
				<view class="info">
					<text class="info-label">送回地址</text>
					<text class="info-value">{{data.sendDeptPlace||'-'}}</text>
				</view>
				<view class="info">
					<text class="info-label">联系人</text>
					<text class="info-value">{{data.receiveUser||'-'}} {{data.receivePhone||''}}</text>
				</view>
			</view>
			<view v-show="ShowPickUpInfo">
				<view class="info">
					<text class="info-label">取件科室</text>
					<text class="info-value">{{data.deptIdToName}}/{{data.hospitalIdToName}}</text>
				</view>
				<view class="info">
					<text class="info-label">取件地址</text>
					<text class="info-value">{{data.deptPlace||'-'}} </text>
				</view>
				<view class="info">
					<text class="info-label">联系人</text>
					<text class="info-value">{{data.deptUser||'-'}} {{data.phone||''}}</text>
				</view>
			</view>
		</template>
		<template #footer>
			<view class="footer">
				<HButton :block="false" class="" type="info" icon="phone" plain size="small" @click="onPhone(data)">电话联系</HButton>

				<template v-if="HiddenButton">
					<HButton :block="false" class="u-m-l-30" size="small" plain @click="onQuoteButton(ControlButton[data.currState].navHandlePath)">
						{{ControlButton[data.currState].text}}
					</HButton>
				</template>

			</view>
		</template>
	</CardWrapper>
</template>

<script>
	import CardWrapper from '../../components/cardWrapper.vue'
	import HButton from '../../../button/index.vue'
	import Colors from '@/common/color.js'
	import { factoryState } from '@/sendRepair/factory/state.js'
	export default {
		components: {
			CardWrapper,
			HButton,
		},

		filters: {
			typeText(val, type) {
				let text = ''

				if (type === 'quote') {
					text = '报价截止'

				} else if (type === 'pickUp') {
					text = '预约取走'
				} else if (type === 'return' || type == 'repair') {
					text = '派单时间'
				}

				return `${text} : ${val||'-'}`
			}
		},
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			type: {
				type: String,
				default: ''
			}
		},

		computed: {

			ControlButton() {
				return factoryState.buttonParams
			},
			// 显示基础数据
			ShowBaseInfo() {
				// 待报价状态
				let { ToBeQuoted, ToBeConfirmedToReturnToTheDepartment, QuotationToBeReviewed, Quotation, QuotationFailed } = factoryState.stateValue

				return [ToBeQuoted, ToBeConfirmedToReturnToTheDepartment, QuotationToBeReviewed, Quotation, QuotationFailed].includes(Number(this.data.currState)) || this.type === 'repair'
			},
			ShowQuoteInfoOther() {
				// 已报价 、 报价待审核 【显示报价金额】
				let { QuotationToBeReviewed, Quotation, QuotationFailed } = factoryState.stateValue
				return [QuotationToBeReviewed, Quotation, QuotationFailed].includes(Number(this.data.currState))
			},
			// 显示取件信息
			ShowPickUpInfo() {
				return this.type === 'pickUp'
			},
			//显示 配送中的信息
			ShowRenturnOtherInfo() {
				let { Distribution } = factoryState.stateValue
				return [Distribution].includes(Number(this.data.currState))
			},

			HiddenButton() {
				let { ToBeConfirmedToReturnToTheDepartment } = factoryState.stateValue
				return ![ToBeConfirmedToReturnToTheDepartment].includes(Number(this.data.currState || 0))
			},
			StateColorStyle() {
				return `color:${factoryState.colors[this.data.currState]}`;
			}

		},
		data() {
			return {


			}
		},

		methods: {
			onCard(path) {
				console.log(path, '-----------onCard-----------');
				const { currState, id, currStateToName, source } = this.data
				let name = factoryState.CardSourceStateText[source] || currStateToName
				let queryParams = `?state=${currState}&id=${id}&currStateToName=${name}&source=${source || ''}`
				let url = `${path}${queryParams}`
				wx.navigateTo({
					url: url
				})
			},
			onQuoteButton(path) {
				console.log(path, '-----------onQuoteButton----------');
				const { currState, id, currStateToName, source } = this.data
				let queryParams = `?state=${currState}&id=${id}&currStateToName=${currStateToName}&source=${source || ''}`
				let url = `${path}${queryParams}`
				wx.navigateTo({
					url: url
				})

			},

			//电话联系
			onPhone(data = null) {
				let { phone, receivePhone } = data
				if (phone || receivePhone) {
					wx.makePhoneCall({
						phoneNumber: phone || receivePhone

					})
				}
			},

		}

	}
</script>


<style lang="scss" scoped>
	.head {
		display: flex;

		&-left {
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-right {
			font-weight: 600;
			font-size: 28rpx;
			text-align: right;
			padding-right: 20rpx;
		}
	}

	.info {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		&-label {
			flex-basis: 20%;
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-value {
			flex: 1;
			font-weight: 400;
			font-size: 28rpx;
			color: #0F2E4D;
		}

		&+& {
			margin-top: 30rpx;
		}
	}

	.footer {
		text-align: right;
		margin-top: 60rpx;
		padding-right: 20rpx;

		>.leftButton {
			margin-right: 30rpx;
			display: inline-block
		}
	}
</style>
